import React from 'react'
import PropTypes from 'prop-types';
import { Icon,InputItem,Button,Picker,List } from 'antd-mobile'
import CommonHeader from 'COMPONENT/CommonHeader';

import './index.less'
const PickerItem = List.Item;
// ========================================
class PublicFundsRent extends React.Component {
	static contextTypes = {
        router: PropTypes.object.isRequired
    }
	constructor(props) {
        super(props);
        
        const byStagesData = [
          	{value:'奉贤支行',label:'奉贤支行'},
          	{value:'闵行支行',label:'闵行支行'},
          	{value:'浦东支行',label:'浦东支行'},
          	{value:'张江支行',label:'张江支行'}      
        ]
        const outletsData = [
          	{value:'奉贤支行',label:'奉贤支行'},
          	{value:'闵行支行',label:'闵行支行'},
          	{value:'浦东支行',label:'浦东支行'},
          	{value:'张江支行',label:'张江支行'}
        ]
        this.state = {
        	btnActive:'1',
          byStagesData: byStagesData,
          outletsData: outletsData,
          qishuChecked: byStagesData[0]['value'],
          bankOutletsChecked: outletsData[0]['value'],
          checkedVal:'',
          infoData:{}
        }
    }    
	
	leftAction = () => {
		this.context.router.push({
			pathname: '/Home'
		})
	}
	
	onBanksChange = (val, data) => {
	    let colNum = 1;
	    const d = [...this.state.byStagesData];
    	const asyncValue = [...val];
	    this.setState({
	      data: d,
	      bankOutletsChecked: val,
	      cols: colNum,
	      asyncValue,
	    });
	};
	
	onMonthsChange = (val, data) => {
	    let colNum = 1;
	    const d = [...this.state.byStagesData];
    	const asyncValue = [...val];
	    this.setState({
	      data: d,
	      qishuChecked: val,
	      cols: colNum,
	      asyncValue,
	    });
	};
	
    render() {
    	let {btnActive,byStagesData,outletsData,qishuChecked, bankOutletsChecked} = this.state;
        return (
            <div style={{
            	background:'#eee',
            	height:'100%',overflow:`auto`}} >
            	<CommonHeader 
					name= "公积金租房"					
					leftContentTitle="@back"
					leftContent="上一页"
					leftAction={this.leftAction}
				/>
				<div style={{height:'.9rem'}}></div>
            	
            	<img src = './imgs/publicRent.png' style={{ width:`100%` }} />

            	
            	<div  className="pdrentWrap">
            		<div className='commonDiv' >
				    	<label> 姓名 </label>
				    	<input value='*红' style={{ background:`none` }} disabled />
				    </div>
				    <div className='commonDiv' >
				    	<label> 身份证号 </label>
				    	<input value='42900*******7245' style={{ background:`none` }} disabled />
				    </div>
				    <div className='commonDiv' >
				    	<label> 手机号 </label>
				    	<input value='159*****897' style={{ background:`none` }} disabled />
				    </div>			    
				    <p className='pTag_1' >请核对上述三项信息与您本人信息一致后,进行后续操作.</p>
				    <p>目前与公积金合作的Ukey认=认证银行有:汉口银行.</p>
				    <p>请选择以上合作银行进行实人认证,并输入对应的银行卡号!</p>
				    <div style={{ marginTop:`20px` }} >
				    <Picker 
						data={outletsData}
						extra = {bankOutletsChecked}
						cols="1"  
						onOk = {(v,outletsData) =>this.onBanksChange(v,outletsData)}
					>

			          <PickerItem arrow="horizontal" >银行</PickerItem>				        
			        </Picker>
					</div>
			        
				    <div className='commonDiv' >
				    	<label> 卡号 </label>
				    	<input value='622788888888888' />
				    </div>
				    <div className='commonDiv' style={{ marginTop:`20px`,justifyContent:`flex-start` }} >
				    	<label>婚姻关系</label>
				    	<input type='radio' name='radio' value='0' style={{ marginLeft:`20px` }} /><p>未婚</p>
				    	<input type='radio' name='radio'  value='1' checked style={{ marginLeft:`20px` }} /><p>已婚</p>
				    </div>
				    <div className='commonDiv' style={{ marginTop:`20px` }} >
				    	<label> 配偶姓名 </label>
				    	<input value='王某某' />
				    </div>
				    <div className='commonDiv' >
				    	<label> 配偶身份证号 </label>
				    	<input value='411303198307313333' />
				    </div>
				    <div className='commonDiv' >
				    	<label> 配偶手机号 </label>
				    	<input value='15588888888' />
				    </div>
				    <div style={{ marginTop:`20px` }} >
				    
				    <Picker 
						data={byStagesData}
						extra = {qishuChecked}
						cols="1"  
						onOk = {(v, byStagesData) =>this.onMonthsChange(v,byStagesData)}
					>
			          <PickerItem arrow="horizontal" >银行</PickerItem>
				       
				        
			        </Picker>
			        </div>
				    <div className='commonDiv' >
				    	<label> 卡号 </label>
				    	<input placeholder='62278888888888888' />
				    </div>
				    <Button type='warning' className='button_1' style={{ background:`#108ee9`, marginLeft:`15px`,marginRight:`15px`,marginTop:`20px` }} > 下一步  </Button>
				    <div style={{width:`92%`,background:`#ccc`,height:`2px`,margin:`0 auto`,marginTop:`20px`}}> 
				    </div>
				    <p >温馨提示:</p>
				    <p  >1:单身用户请正确选择您的Ukey所属银行,并输入本人名下真实有效且与您选择Ukey所属银行相对应的卡号.</p>
				    <p  >2:请于提交成功后的5分钟内登录所选银行的网银,进行实人认证.</p>
				    <p >3:已婚用户还需如实填写你的配偶信息,且配偶必须为武汉住房公积金个人网上业务系统用户,请正确选择配偶的银行</p>
			   	</div>
            </div>
            
            

        );
    }
}
// ========================================
export default PublicFundsRent;